<template>
  <n-breadcrumb>
    <transition-group name="breadcrumb">
      <n-breadcrumb-item v-for="item of breadcrumbs" :key="item.key">
        <n-dropdown
          v-if="item.children && item.children.length > 0"
          :options="item.children"
          @select="handleSelect"
        >
          <span>
            {{ item.label }}
            <n-icon>
              <ChevronDown />
            </n-icon>
          </span>
        </n-dropdown>
        <span v-else>{{ item.label }}</span>
      </n-breadcrumb-item>
    </transition-group>
  </n-breadcrumb>
</template>

<script lang="ts">
  import { RouteRecordRawWithHidden } from '@/types/store'
  import { isExternal } from '@/utils'
  import { defineComponent, onMounted, reactive, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useLayoutStore } from '..'
  import { ChevronDown } from '@vicons/ionicons5'
  interface DropItem {
    label: string
    key: string
    children?: DropItem[]
  }
  export default defineComponent({
    name: 'Breadcrumb',
    components: { ChevronDown },
    setup() {
      const breadcrumbs = reactive([] as Array<DropItem>)
      const route = useRoute()
      const router = useRouter()
      const store = useLayoutStore()
      function handlePath(path: string) {
        return path.split('/').reduce((pre: string[], cur: string) => {
          if (cur) {
            const lastItem = pre[pre.length - 1]
            if (lastItem) {
              pre.push(lastItem + '/' + cur)
            } else {
              pre.push('/' + cur)
            }
          }
          return pre
        }, [])
      }
      function generatorDropdown(
        routes: Array<RouteRecordRawWithHidden> | undefined,
        parentPath = '/'
      ) {
        if (!routes) return
        const tempArray: DropItem[] = []
        routes.forEach((it) => {
          const tempItem: DropItem = {
            label: it.meta?.title as string,
            key: isExternal(it.path)
              ? it.path
              : it.path.startsWith('/')
              ? it.path
              : parentPath + '/' + it.path,
            children: [],
          }
          if (it.children && it.children.length > 0) {
            tempItem.children = generatorDropdown(it.children, tempItem.key)
          } else {
            delete tempItem.children
          }
          tempArray.push(tempItem)
        })
        return tempArray
      }
      function findRoute(paths: string[]) {
        const selectRoutes: Array<RouteRecordRawWithHidden> = []
        let tempOrigin = store.state.permissionRoutes
        paths.forEach((it) => {
          const selectRoute = tempOrigin.find((pIt) => pIt.path === it)
          if (selectRoute) {
            tempOrigin = selectRoute.children as []
          }
          selectRoutes.push(selectRoute as RouteRecordRawWithHidden)
        })
        return selectRoutes
      }
      function generatorBreadcrumb() {
        breadcrumbs.length = 0
        const findedRoutes = findRoute(handlePath(route.path))
        const aa = generatorDropdown(findedRoutes)
        if (aa) {
          breadcrumbs.push(...aa)
        }
      }
      function handleSelect(key: string) {
        router.push(key)
      }
      onMounted(() => {
        generatorBreadcrumb()
      })
      watch(
        () => route.path,
        () => {
          if (
            route.path.startsWith('/redirect') ||
            ['/login', '/404', '/405', '/403'].includes(route.path)
          )
            return
          generatorBreadcrumb()
        }
      )
      return {
        breadcrumbs,
        handleSelect,
      }
    },
  })
</script>
